<template>
	<view class="main_class_index" @click="toDetail">
		<view class="u-flex u-flex-1">
			<image
				:src=" (course.teacher?.callingBg || course.teacher?.avatar) "
				class="_avatar" mode="aspectFit"></image>
			<view class="u-m-l-16 u-flex-1">
				<view class="title u-line-2">{{course.title}}</view>
				<view class="u-flex u-flex-between u-m-t-8">
					<block  v-if="course.domain">
						<tag :text="course.domain.name" background="#DCECFF" color="#2080F7"></tag>
					</block>
					<view class="u-flex u-flex-items-center">
						<image src="@/static/images/wz.png" class="wz_"></image>
						<text class="sub_phone u-m-l-6">{{course.teacher?.city}}</text>
					</view>
				</view>
			</view>
		</view>
		<view class="u-m-t-12 f-s-12 u-info">
			<text>主讲老师：</text>
			<text>{{course.teacher?.name}} - {{course.teacher?.label}}</text>
		</view>
	</view>
	<up-line margin="10px 0" color="#F3F3F3"></up-line>
</template>

<script setup>
	import tag from "@/components/common/tag.vue"
	import {
		defineProps
	} from 'vue';
	const props = defineProps({
		course: Object
	})

	function toDetail() {
		uni.navigateTo({
			url: '/subPackages/class/main_detail?id=' + props.course.id
		})
	}
</script>

<style lang="scss" scoped>
	.main_class_index {
		
		._avatar {
			width: 100rpx;
			height: 100rpx;
			// 从左到右渐变
			background: linear-gradient(to right, #E8EBF2, #E8EBF2 50%, #EEEFF4 50%, #F3F4F8);
			border-radius: 8px;
		}

		.title {
			height: 80rpx;
			font-weight: bolder;
			font-size: 14px;
			line-height: 20px;
		}

		.wz_ {
			width: 32rpx;
			height: 32rpx;
		}

	}
</style>